<template>
	<div id="cart">
		<div class="cart-head">
			<h3 class="cart-title">
				购物车
			</h3>
			<h4 class="editor">
				编辑
			</h4>
		</div>
		<div class="cart-content">
			<ul>
				<li v-for="(i,index) in getCartData()">
					<div class="checkbox">
						<input type="checkbox" v-model="i.status" @change="danxuan(i)">
					</div>
					<div class="cart-img">
						<img :src="i.pImage[0]">
					</div>
					<div class="pro-content">
						<p class="pro-name">
							{{i.pName}}
						</p>
						<p class="pro-price">
							￥{{i.cost_price}}
						</p>
						<div class="pro-count">
							<input type="button" class="pro-reduce" value="-" @click="reduce(i,-1)">
							<input type="number" class="pro-total" v-model="i.num">
							<input type="button" class="pro-add" value="+" @click="add(i,1)">
						</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="cart-total">
			<div class="all-select">
				<input type="checkbox" v-model="statu" @change="quanxuan(statu)">
			</div>
			<p class="total-price">
				总计:<span>￥{{money}}</span>
			</p>
			<div class="total-count">
				结算
			</div>
		</div>
	</div>
</template>


<style>
	#cart{
		width: 100%;
		position: absolute;
		top: 0;
		bottom: 0;
	}
	.cart-head{
		width: 100%;
		height: 1.2rem;
		position: absolute;
		top: 0;
		line-height: 1.2rem;
		border-bottom: 1px solid #ccc;
		box-sizing: border-box;
	}
	.cart-title{
		width: 40%;
		text-align: center;
		margin: 0 auto;
		font-size: 0.426667rem;
	}
	.editor{
		position: absolute;
		right: 0.533333rem;
		top: 0;
		color: #555;
		font-size: 0.373333rem;
	}
	.cart-content{
		width: 100%;
		position: absolute;
		top: 1.2rem;
		bottom: 0;
		overflow: auto;
	}
	.cart-content ul li{
		width: 100%;
		display: flex;
		border-bottom: 2px solid #f0f0f0;
	}
	.checkbox,.all-select{
		width: 15%;
	}
	.checkbox input,.all-select input{
		width: 0.533333rem;
		height: 0.533333rem;
		margin: 60% auto;
		display: block;
		border: none;
	}
	.cart-img{
		width: 25%;
	}
	.cart-img img{
		width: 90%;
		margin: 5%;
	}
	.pro-content{
		width: 60%;
		position: relative;
	}
	.pro-name{
		margin-top: 0.133333rem;
		line-height: 0.533333rem;
	    height: 1.066667rem;
	    font-size: 0.4rem;
	    overflow: hidden;
	    display: -webkit-box;
	    -webkit-line-clamp: 2;
	    -webkit-box-orient: vertical;
	    word-break: break-all;
	}
	.pro-price{
		color: #ff3d00;
		font-size: 0.4rem;
	}
	.pro-count{
		position: absolute;
		right: 0.266667rem;
		bottom: 0.266667rem;
		display: flex;
	}
	.pro-total{
		width: 0.666667rem;
		height: 0.666667rem;
		text-align: center;
		border: 1px solid #f0f0f0;
		outline: none;
		box-sizing: border-box;
	}
	.pro-reduce,.pro-add{
		width: 0.666667rem;
		height: 0.666667rem;
		border: 1px solid #f0f0f0;
		outline: none;
	}
	.cart-total{
		width: 100%;
		height: 1.2rem;
		position: absolute;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		z-index: 100;
	}
	.all-select input{
		margin: 20% auto;
	}
	.total-count{
		width: 20%;
		background: #ff3d00;
		color: #fff;
		font-size: 0.426667rem;
		line-height: 1.173333rem;
		text-align: center;
	}
	.total-price{
		width: 60%;
		text-align: right;
		font-size: 0.32rem;
		color: #999;
		line-height: 1.173333rem;
	}
	.total-price span{
		color: #ff3d00;
		font-size: 0.426667rem;
	}
</style>


<script>
	export default{
		data(){
			return {
				statu: false
			}
		},
		methods: {
			getCartData(){
				return  this.$store.getters.send;
				
			},
			add(i,number){
				this.$store.commit('addNum',{
					i: i,
					number: number
				})
			},
			reduce(i,number){
				this.$store.commit('reduceNum',{
					i: i,
					number: number
				})
			},
			danxuan(i){
				console.log(i);
				this.$store.commit('totalPrice',i);			
				this.$store.commit('danxuan');
				this.statu = this.$store.getters.danxuan;
				return this.statu;
			},
			quanxuan(){
				this.$store.commit('quanxuan',this.statu);
			}
		},
		computed: {
			money(){
				return this.$store.getters.totalPrice;
			}
		},
		mounted(){
			this.getCartData();
			// this.totalPrice();
		}
	}
</script>